<template>
	<view class="apply-cash" v-if="!loadding" :style="'background-image:url('+agent.background+');'">
		<!--申请成功-->
		<view class="form-wrap p30 f30">
			<view class="d-c-c d-c pb20">
				<view class="red">
					<text class="f30">￥</text>
					<text class="f50 fb">{{agent.agent.money}}</text>
				</view>
				<view class="f28 gray9">
					{{ words.cash_apply.words.capital.value }}
				</view>
			</view>
			
			<form @submit="formSubmit" @reset="formReset">
				<view class="form-item">
					<view class="field-name">{{ words.cash_apply.words.money.value }}</view>
					<input class="flex-1 text-price" name="money" type="number" placeholder-class="grary" 
					:placeholder="words.cash_apply.words.money_placeholder.value" />
				</view>
				<view class="p-0-20 red f30 tc">
					  {{ words.cash_apply.words.min_money.value }} {{agent.settlement.min_money}}元
				</view>
				<view class="mt30 p-20-0 fb">提现方式</view>
				<view class="form-item">
						<view class="ww100">
							<template v-if="hasType('10')">
								<view class="p-30-0 border-b">
									<view class="d-b-c" :class="withdraw_type==10?'active':''" @click="TabType(10)">
										<text>微信支付</text>
										<text class="icon iconfont icon-xuanze"></text>
									</view>
								</view>
							</template>
							<template v-if="hasType('20')">
								<view class="p-30-0 border-b">
									<view class="d-b-c" :class="withdraw_type==20?'active':''" @click="TabType(20)">
										<text>支付宝</text>
										<text class="icon iconfont icon-xuanze"></text>
									</view>
									<template v-if="withdraw_type==20">
										<view class="mt20">
											<input class="p20 border" name="alipay_name" type="text" value="" placeholder-class="grary" placeholder="请输入姓名" />
										</view>
										<view class="mt20">
											<input class="p20 border" name="alipay_account" type="text" value="" placeholder-class="grary" placeholder="请输入支付宝账号" />
										</view>
									</template>
								</view>
							</template>
							<template v-if="hasType('30')">
								<view class="p-30-0 border-b">
									<view class="d-b-c" :class="withdraw_type==30?'active':''" @click="TabType(30)">
										<text>银行卡</text>
										<text class="icon iconfont icon-xuanze"></text>
									</view>
									<template v-if="withdraw_type==30">
										<view class="mt20">
											<input class="p20 border" name="bank_name" type="text" value="" placeholder-class="grary" placeholder="请输入姓名" />
										</view>
										<view class="mt20">
											<input class="p20 border" name="bank_account" type="text" value="" placeholder-class="grary" placeholder="请输入开户行名称/地址" />
										</view>
										<view class="mt20">
											<input class="p20 border" name="bank_card" type="text" value="" placeholder-class="grary" placeholder="请输入银行卡号" />
										</view>
									</template>
								</view>
							</template>

						</view>
				</view>
				<view class="d-c-c mt30">
					<button type="primary" class="btn-red flex-1" form-type="submit">{{ words.cash_apply.words.submit.value }}</button>
				</view>
			</form>

		</view>

	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				/*是否加载完成*/
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				/*支付类别*/
				withdraw_type: 10,
				isData: false,
				agent: {},
				payType: [],
				words:{},
				/*小程序订阅消息*/
				temlIds: [],
			}
		},
		mounted() {
			/*获取数据*/
			this.getData();
		},
		methods: {
			
			/*获取数据*/
			getData() {
				let self = this;
				uni.showLoading({
				    title: '加载中'
				});
				self._get('user.agent/cash', {
					platform: self.getPlatform()
				}, function(res) {
					self.agent = res.data;
					self.words = res.data.words;
					self.payType = self.agent.settlement.pay_type;
					self.agent.isData = true;
					self.temlIds = res.data.template_arr;
					uni.hideLoading();
				});
			},
			
			/*切换提现方式*/
			TabType(e) {
				this.withdraw_type = e;
			},
			
			/*判断是否存在*/
			hasType(e){
				if(this.payType.indexOf(e)!=-1){
					return true;
				}else{
					return false;
				}
			},

			/*申请*/
			formSubmit: function(e) {
				
				let self = this;
				var formdata = e.detail.value;
				formdata.pay_type = self.withdraw_type;
				var data = JSON.stringify(formdata);
				let callback = function(){
					uni.showLoading({
						title: '正在提交',
						mask: true
					})
					self._post('plus.agent.cash/submit', {
						data: data
					}, function(data) {
						uni.hideLoading();
						uni.showToast({
							title: '申请成功',
							duration: 2000,
							icon: 'success'
						});
						uni.navigateBack(-1);
					});
				} 
				self.subMessage(self.temlIds, callback);
			},
		}
	}
</script>

<style>
	.apply-cash{
		padding: 160rpx 30rpx 30rpx;
		background-position: center 0;
		background-size: 750rpx auto;
		background-repeat: no-repeat;
	}

	.form-wrap {
		border-radius: 20rpx;
		background: #FFFFFF;
		box-shadow: 0 0 16rpx 0 rgba(0, 0, 0, .2);
	}

	.form-item {
		padding: 20rpx 0;
		margin-bottom: 20rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		font-size: 28rpx;
	}

	.form-item .field-name {
		width: 140rpx;
	}

	.form-item input {
		font-size: 28rpx;
	}

	.form-item .text-price {
		padding: 0 10rpx;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 40rpx;
		border: 1px solid #CCCCCC;
	}

	.agreement-content {
		max-height: 60vh;
		overflow-y: auto;
	}

	.form-item .active .iconfont.icon-xuanze {
		color: #04BE01;
	}
	
	.apply-cash .btn-red {
		height: 88rpx;
		line-height: 88rpx;
		border-radius: 44rpx;
		box-shadow: 0 8rpx 16rpx 0 rgba(226,35,26,.6);
	}
</style>
